<template>
  <div id="home-app">
    <dv-full-screen-container class="content">
      <div @click="toManage()"
        style="position: fixed; top:10px;left: 750px; width: 210px; height: 40px; background-color: #fff; z-index: 100;opacity: 0">
        <!-- <img style="width: 30px; height: 30px;" src="@/assets/jwd-icon-home.png" alt=""> -->
      </div>
      <dv-border-box-11 title="智游景区">
        <div style="display: flex;  justify-content: space-between; width: 100%; height: 50%;">
          <div class="item" style="margin-left: 20px;">
            <dv-border-box-8 style="width: 100%; height: 50%;">
              <counter :total="todayTotal" :cur="cur"></counter>
            </dv-border-box-8>
            <dv-border-box-13 style="width: 100%; height: 50%;">
              <R7DayNum :dataList="R7dayData"></R7DayNum>
            </dv-border-box-13>
          </div>
          <div class="big-mid">
            <dv-border-box-1 style="width: 100%; height: 100%;">
              <div style="height: 20px;">

              </div>
              <div id="container" style="height:93%">

              </div>
            </dv-border-box-1>
          </div>
          <div class="item" style="margin-right: 20px;">
            <dv-border-box-12 style="width: 100%; height: 50%;">
              <agePieVue :dataList="AgeData"></agePieVue>
            </dv-border-box-12>
            <dv-border-box-8 :reverse="true" style="width: 100%; height: 50%;">
              <nowPlayerNumVue :dataList="NowUserData" :axData="NowUserAxisdata"></nowPlayerNumVue>

            </dv-border-box-8>
          </div>
        </div>

        <div style="display: flex;  justify-content: space-between; width: 100%;">
          <div class="footer-item" style="flex: 0 1 30%;">
            <dv-border-box-1 style="width: 100%; height: 300px; margin-left: 13px;">
              <chinaMap :DataList="PlayerFromDataList"></chinaMap>
            </dv-border-box-1>
          </div>
          <div class="footer-item" style="flex: 0 1 40%;">
            <dv-border-box-9 style="width: 100%; height: 300px;">
              <spotNumVue></spotNumVue>
            </dv-border-box-9>
          </div>
          <div class="footer-item" style="flex: 0 1 30%;">
            <dv-border-box-1 style="width: 100%; height: 300px; margin-right: 20px;">
              <userFeedBackVue :dataList="useFeedData"></userFeedBackVue>
            </dv-border-box-1>
          </div>
        </div>


      </dv-border-box-11>

    </dv-full-screen-container>

  </div>
</template>

<script>
import chinaMap from '@/components/chinaMap.vue';
import counter from '@/components/counter/counter.vue'
import R7DayNum from '@/components/R7DayNum.vue';
import spotNumVue from '@/components/spotNum.vue';
import agePieVue from '@/components/agePie.vue';
import userFeedBackVue from '@/components/userFeedBack.vue';
import nowPlayerNumVue from '@/components/nowPlayerNum.vue';
import TMap from '@/utils/initmap'
import request from '@/utils/request';

export default {
  components: {
    chinaMap,
    counter,
    R7DayNum,
    spotNumVue,
    agePieVue,
    userFeedBackVue,
    nowPlayerNumVue
  },

  data() {
    return {
      TXMap: null,
      websock: null,
      websock2: null,
      geometries: [],
      longitudes: [],
      latitudes: [],
      tMap: null,
      markerLayer: null,
      todayTotal: 123456,
      cur: 1234,
      NowUserAxisdata: [],
      NowUserData: [],
      useFeedData: [
        { value: 148, name: '不满意' },
        { value: 735, name: '一般' },
        { value: 580, name: '满意' },
      ],
      R7dayData: [121, 222, 433, 344, 565, 466, 577],
      AgeData: [
        { value: 448, name: '5-17' },
        { value: 735, name: '18-30' },
        { value: 580, name: '31-44' },
        { value: 284, name: '45-60' },
        { value: 120, name: '60以上' }
      ],
      PlayerFromDataList: [
        {
          name: "黑龙江",
          value: 44,

        },
        {
          name: "湖南",
          value: 23,

        },
        {
          name: "云南",
          value: 68,

        },
        {
          name: "安徽",
          value: 66,

        },
        {
          name: "江西",
          value: 33,

        },
        {
          name: "吉林",
          value: 43,

        },
        {
          name: "湖北",
          value: 143,

        },

      ]
    }
  },
  mounted() {
    this.initTMap()
    this.initWebsocket()
    this.initLocation()
    this.initProvince()
    this.initAgePie()
  },
  unmounted() {
    this.tMap?.destroy();
  },
  methods: {
    initAgePie() {
      request.get("/play-table/getAgePie").then(res => {
        if (res.code === "1") {
          this.AgeData = res.data
          console.log("请求年龄")
        }
      })
    },


    initProvince() {
      console.log("数据来了")
      request.get("/play-table/getProvince").then(res => {
        if (res.code === '1') {

          this.PlayerFromDataList = res.data;
          console.log("数据来了")
        }
      })

    },
    initWebsocket() {
      let url = "ws://localhost:7777/websocket/1";
      this.websock = new WebSocket(url);
      this.websock.onopen = this.websocketonopen;
      this.websock.send = this.websocketsend;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    initLocation() {
      let url = "ws://localhost:7777/websocket/2";
      this.websock2 = new WebSocket(url);
      this.websock2.onopen = this.websocketonopen;
      this.websock2.send = this.websocketsend;
      this.websock2.onerror = this.websocketonerror;
      this.websock2.onmessage = this.pushLoaction;
      this.websock2.onclose = this.websocketclose;
    },
    pushLoaction(e) {
      console.log("位置获取")
      var da = JSON.parse(e.data)
      this.longitudes.push(da.longitude)
      this.latitudes.push(da.latitude)
      var id = this.longitudes.length + 1
      console.log("位置", da.latitude, da.longitude)
      var d = {
        "id": id.toString(),
        "styleId": "mystyle",
        "position": new this.TXMap.LatLng(da.latitude, da.longitude)
      }
      this.geometries.push(d)
      this.tMap.destroy();
      this.markerLayer = null;
      this.initTMap()
      let msg = "坐标:经度" + da.longitude + "纬度" + da.latitude;
      this.$alert('警告,收到一条求助信息,请立即记录位置再点击确认按钮！' + msg, '求助报警', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'error',
            message: '已查看'
          });
        }
      });
    },

    // 连接成功后调用
    websocketonopen: function () {
      console.log("WebSocket连接成功");
    },
    // 发生错误时调用
    websocketonerror: function (e) {
      console.log("WebSocket连接发生错误");
    },
    // 给后端发消息时调用
    websocketsend: function (e) {
      console.log("WebSocket连接发生错误");
    },
    // 接收后端消息
    // vue 客户端根据返回的cmd类型处理不同的业务响应
    websocketonmessage: function (e) {
      var da = JSON.parse(e.data)
      console.log("类型", typeof (da))
      console.log("数据", da)
      var date = new Date()
      if (date.getHours() == 0 && date.getMinutes <= 3 && date.getMinutes >= 0) {
        this.NowUserAxisdata = []
        this.NowUserData = []
      }
      if (this.NowUserAxisdata.length >= 9) {
        this.NowUserAxisdata.shift()
        this.NowUserData.shift()
      }
      this.NowUserAxisdata.push(da.ptime)
      this.NowUserData.push(da.num)
      this.cur = da.num
      console.log(da.todayNum)
      this.todayTotal = da.todayNum
      console.log(this.todayTotal)
    },
    // 关闭连接时调用
    websocketclose: function (e) {
      console.log("connection closed (" + e.code + ")");
    },
    initTMap() {
      TMap.init().then((TMap) => {
        this.TXMap = TMap;
        const map = new TMap.Map("container", {
          center: new TMap.LatLng(29.045664, 110.483699), //设置地图中心点坐标
          zoom: 16, //设置地图缩放级别
          viewMode: "3D",
          baseMap: {  // 设置卫星地图
            type: 'satellite'
          }
        });
        this.tMap = map
        let that = this;
        let markerLayer = new TMap.MultiMarker({
          map: this.tMap,
          styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            "myStyle": new TMap.MarkerStyle({
              "width": 25,  // 点标记样式宽度（像素）
              "height": 35, // 点标记样式高度（像素）
              "src": '@/assets/locmarker.png',  //图片路径
              //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
              "anchor": { x: 16, y: 32 }
            })
          },
          geometries: that.geometries
        })
        this.markerLayer = markerLayer

        //初始化infoWindow
        var infoWindow = new TMap.InfoWindow({
          map: map,
          position: new TMap.LatLng(39.984104, 116.307503),
          offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
        })
        infoWindow.close()//初始关闭信息窗关闭
        //监听标注点击事件
        this.markerLayer.on("click", function (evt) {
          //设置infoWindow
          infoWindow.open() //打开信息窗
          infoWindow.setPosition(evt.geometry.position)//设置信息窗位置
          infoWindow.setContent(evt.geometry.position.toString())
        })//设置信息窗内容

        //移除控件缩放

        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

        // 移除比例尺控件

        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);

        // 移除旋转控件

        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);

      });
    },



    toManage() {
      console.log(1111)
      this.$router.push({ name: 'layout' })
    }
  },
  created: {

  }
}

</script>

<style lang="less">
#container {
  width: 95%;
  height: 92%;
  margin: 0 auto;
}

body {
  margin: 0 0;
}

#home-app {
  margin: 0 0;
  width: 100%;
  height: 100vh;
}

.content {
  background: url('@/assets/a15.png') no-repeat center center;
  padding: 0;
  background-size: cover;
  //   .border-box-content{
  //   display: flex;
  //   justify-content: space-between;
  // }
}

.item {
  flex: 0 1 24%;
  margin-left: 5px;
  margin-top: 60px;
}

.big-mid {
  flex: 0 1 48%;
  width: 100%;
  margin-left: 5px;
  margin-top: 60px;
}

.footer-item {
  margin-left: 10px;
  margin-top: 15px;
  margin-right: 20px;
}
</style>